<template>
	<view class="page-con">
			<van-cell title="头像"   >
				<slot>
					<button  type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						  <img  class="myheadimg" :src="userInfo.avatar_url || userInfo.avatar || 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/logo1.png'" />
					</button>
				</slot>
			</van-cell>
		  <van-field  input-align="right" is-link :value="userInfo.nickname" @blur="changeInfo($event,'nickname')" label="昵称" placeholder="请输入" />
		  <van-field  input-align="right" is-link @blur="changeInfo($event, 'email')" :value="userInfo.email" label="邮箱" placeholder="请输入" />
		  
		  <van-cell  title="微信二维码"  is-link >
		  	<slot>
		  	    <img  @click="showerweima"  class="erweimaimg" :src="userInfo.qr_code_url" />
		  	</slot>
		  </van-cell>
		  <van-cell  title="护照信息"  is-link >
		  	<slot>
		  	  <span @click="jump" class="color-orange"> 
			      去上传
		  	   </span>
		  	</slot>
		  </van-cell>
		  
		<van-field  maxlength="20" input-align="right" is-link :value="userInfo.phone" @blur="changeInfo($event,'phone')" label="手机号码" placeholder="请输入" />
		
		  <van-cell  title="用户ID"  :value="userInfo.unique_id" >
		  
		  </van-cell>
		  
		  <view @click="changeRole" class="admin-house">
			  房源托管
		  </view>
		
		<view @click="logOut" class="userinfo-btn">
			退出登录
		</view>
		
		<updateErweima @updateQrcode="getUserInfo" ref="erweimaRef"></updateErweima>
		
		
	</view>
</template>

<script>
	const FormData = require('../utils/wxFormdata/formData.js')
	import updateErweima from '@/components/updateErweima.vue';
	export default {
		components:{
			updateErweima
		},
		 data() {
			 return {
				 pageData: '',
				 userInfo: this.$getStorage('userInfo'),
				 avatar:'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/logo1.png',
				
			 }
		 },
		 methods: {
			 logOut() {
				 this.$http.logout().then(res =>{
					 uni.clearStorage();
					 this.$toast('您已退出登录');
					 this.$goPage(3, '/pages/index/index')
				 });
			 },
			 changeRole(type) {
				 if(this.userInfo.role == 2) {
					 // 跳转到 tabBar 页面
					 uni.switchTab({
					     url: '/pages/index/index'
					 });
					 return;
				 }
				 
				 
			 	let data = {
			 		role: 2
			 	}
			 	this.$http.changeRole(data).then(res => {
			 		this.$setStorage('userInfo', res)
			 		this.userInfo =  res;
			 		// 跳转到 tabBar 页面
			 		uni.switchTab({
			 		    url: '/pages/index/index'
			 		});
			 	})
			 },
			 changeInfo(event, name) {
				 let data = {
					 // avatar: '',
					 // nickname: '',
					 [name]: event.detail.value
				 }
				 this.$http.editUserInfo(data).then(res => {
				       this.$toast('修改成功');
					   this.getUserInfo();
				 })
			 },
			onChooseavatar(e) {
				const {avatarUrl} = e.detail;
				console.log(avatarUrl);
				let formData = new FormData();
				// formData.append("nickname", this.userInfo.nickname);
				formData.appendFile("avatar", avatarUrl);
				// formData.append("email", '');
				let data = formData.getData();
				wx.request({
				  url: this.$getBaseUrl() + '/update-profile',
				  header: {
				    'content-type': data.contentType,
					'Accept': 'application/json,text/plain, */*',
					'Authorization': this.$getStorage('token') ?'Bearer '+ this.$getStorage('token') : ''
				  },
				  method: 'post',
				  data: data.buffer,
				  success: (res) => {
					  console.log(res);
					  this.getUserInfo();
				  }
				});
			},
			showerweima() {
				this.$refs.erweimaRef.show();
			},
			jump() {
				this.$goPage(1, '/subOrder/uploadPassport?pageType=2');  //1订单  2 个人中心
			},
			
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					loop: true,
					success: res => {
					console.log(res);
						var tempFilePaths = res.tempFilePaths;
						this.$http.getOssToken().then(qiniuToken => {
							let qiniuData = qiniuToken.data;
							const key = `${
									qiniuData.catalog
								}/${this.getDate()}/${this.guid()}${this.getfileExtname(
									tempFilePaths[0]
								)}`;
								let formData = {
									key,
									token: qiniuData.upToken,
								}
								let domain = qiniuData.domain;
							uni.uploadFile({
									url: 'https://upload.qiniup.com/',
									filePath: tempFilePaths[0],
									name: 'file',
									formData,
									success: uploadFileRes => {
										let data = JSON.parse(uploadFileRes.data);
										console.log(data);
											let uploadFileUrl = `${domain}/${data.key}`;
											this.formData.studentImage = uploadFileUrl;
											console.log(this.formData.studentImage,uploadFileUrl);
									},
									fail(err) {
										console.log(err);
									}
								});
							});
						}
				});
			},
			// 文件随机重命名
			S4() {
				return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
			},
			// 文件随机码
			guid() {
				return (
					this.S4() +
					this.S4() +
					'-' +
					this.S4() +
					'-' +
					this.S4() +
					'-' +
					this.S4() +
					'-' +
					this.S4() +
					this.S4() +
					this.S4()
				);
			},
			// 文件日期
			getDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}${month < 10 ? '0' + month : month}${
					day < 10 ? '0' + day : day
				}`;
			},
			// 文件后缀
			getfileExtname(filename) {
				let lastindex = filename.lastIndexOf('.');
				let extname = filename.substring(lastindex);
				return extname;
			},
			getUserInfo () {
				this.$http.getUserInfo().then(res => {
					this.$setStorage('userInfo',   res)
					this.userInfo = res;
				})
			},
		 },
		 onLoad (option) {
		 // 	this.pageData = option;
			// console.log(this.pageData, 111);
			
		 },
	}
</script>

<style scoped lang="scss">
	.page-con {
	  width: 100%;
	  padding: 30rpx;
	  box-sizing: border-box;
	  .userinfo-btn {
		  width: 100%;
		  color: red;
		  text-align: center;
		  margin-top: 60rpx;
	  }
	  
	  
	}
	
	.myheadimg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: iniline-block;
		float:right;
		vertical-align: middle;
	}
	.erweimaimg {
		width: 30rpx;
		height: 30rpx;
	}
	.admin-house {
		width: 483rpx;
		height: 79rpx;
		background: #FFFBE1;
		border-radius: 121rpx;
		line-height: 79rpx;
		margin: 60rpx auto 30rpx;
		font-size: 33rpx;
		color: #EDBD12;
		text-align: center;
	}
	
</style>
